/*
 * 社区页面
 * */
import React, { Component } from 'react';
import {
    StyleSheet,
    ScrollView,
    Picker,
    Text,
    Navigator,
    TouchableHighlight,
    View
} from 'react-native';


import Menu, {
    MenuContext,
    MenuOptions,
    MenuOption,
    MenuTrigger,
} from 'react-native-popup-menu';
import {renderers} from 'react-native-popup-menu';
const Icon=require('react-native-vector-icons/Ionicons');
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
import ActionSheet from 'react-native-actionsheet';

const buttons = ['取消', '确认退出', '复制', '剪切'];
const CANCEL_INDEX = 0;
const DESTRUCTIVE_INDEX = 1;

export default class Community extends Component {
    constructor(props,ctx) {
        super(props,ctx);   //这一句不能省略，照抄即可
        this.state = {
            language:'',
            modalVisible: false
        };
    }

    _handlePress=(index)=> {
        switch(index){
            case 0:Alert.alert("消息提示",'取消');break;
            case 1:Alert.alert("消息提示",'确认退出');break;
            case 2:Alert.alert("消息提示",'复制');break;
            case 3:Alert.alert("消息提示",'剪切');break;
        }

    }

    show=()=> {
        this.ActionSheet.show();
    }

    render() {
        return (
        <View style={[styles.container]}>
            <View style={[styles.nav_container]}>
                <View>
                    <TouchableHighlight>
                        <Icon style={[styles.nav_logo,styles.nav_left]} name="logo-github" color="#2f4f4f" />
                    </TouchableHighlight>
                </View>
                <View style={{flex:1,alignItems:'center', justifyContent:'center'}}>
                    <Text style={{fontSize:20}}>社区</Text>
                </View>
                <View>
                    <TouchableHighlight
                        onPress={this.show}
                    >
                        <Icon style={[styles.nav_logo,styles.nav_right]} name="ios-menu" color="#2f4f4f" />
                    </TouchableHighlight>
                </View>
            </View>
                    <ScrollableTabView
                        style={[styles.scroll_container]}
                        renderTabBar={() => <ScrollableTabBar style={{height:30, backgroundColor:'#8fbc8f'}}/>}
                    >
                        <ScrollView tabLabel="英语" style={styles.tabView}>
                            <View style={styles.card}>
                                <Text>News</Text>
                            </View>
                        </ScrollView>
                        <ScrollView tabLabel="法语" style={styles.tabView}>
                            <View style={styles.card}>
                                <Text>Friends</Text>
                            </View>
                        </ScrollView>
                        <ScrollView tabLabel="俄语" style={styles.tabView}>
                            <View style={styles.card}>
                                <Text>Messenger</Text>
                            </View>
                        </ScrollView>
                        <ScrollView tabLabel="德语" style={styles.tabView}>
                            <View style={styles.card}>
                                <Text>Notifications</Text>
                            </View>
                        </ScrollView>
                        <ScrollView tabLabel="汉语" style={styles.tabView}>
                            <View style={styles.card}>
                                <Text>Other nav</Text>
                            </View>
                        </ScrollView>
                        <ScrollView tabLabel="葡萄牙语" style={styles.tabView}>
                            <View style={styles.card}>
                                <Text>Friends</Text>
                            </View>
                        </ScrollView>
                        <ScrollView tabLabel="西班牙语" style={styles.tabView}>
                            <View style={styles.card}>
                                <Text>Messenger</Text>
                            </View>
                        </ScrollView>
                        <ScrollView tabLabel="印度语" style={styles.tabView}>
                            <View style={styles.card}>
                                <Text>Notifications</Text>
                            </View>
                        </ScrollView>
                    </ScrollableTabView>
            <ActionSheet
                ref={(o) => this.ActionSheet = o}
                title="确认要退出登录吗？"
                options={buttons}
                cancelButtonIndex={CANCEL_INDEX}
                destructiveButtonIndex={DESTRUCTIVE_INDEX}
                onPress={()=>this._handlePress(this)}
            />

        </View>


        )
    }
}


const styles = StyleSheet.create({
    tabView: {
        flex: 1,
        padding: 10,
        backgroundColor: 'blue',
    },
    card: {
        borderWidth: 1,
        backgroundColor: 'red',
        borderColor: 'rgba(0,0,0,0.1)',
        margin: 5,
        padding: 15,
        shadowColor: '#ccc',
        shadowOffset: { width: 2, height: 2, },
        shadowOpacity: 0.5,
        shadowRadius: 3,
    },
    container: {
        flex: 1
    },
    nav_container: {
        flexDirection:'row',
        flexWrap:'nowrap',
        justifyContent:'space-between',
        backgroundColor: '#00bfff',
        height:40
    },
    scroll_container: {
        flex:1
    },
    nav_logo:{
        textAlign:'center',
        fontSize:35,
    },
    nav_left:{
        paddingLeft:10
    },
    nav_right:{
        paddingRight:10
    }

});
